<template>
  <div>
    <van-tabs v-model="active">
      <van-tab :title="tab" v-for="(tab, index) in tabTitleList" :key="index">
        <div v-for="(item,index) in betsList[index]" :key="index">
          <card-bet :bet="item"></card-bet>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { Toast, Tab, Tabs, Row, Col } from 'vant'
import CardBet from '../../components/card-bet/index'

export default {
  name: 'home',
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [CardBet.name]: CardBet,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data () {
    return {
      active: 0,
      tabTitleList: ['5分钟', '1小时', '3小时'],
      betsList: [],
      tabBetList: ['种类', '涨/跌幅', '猜涨', '猜跌']
    }
  },
  computed: {
    // 判断是否含有空值
    // isnull () {
    //   for (const key in this.bets) {
    //     if (key.hasOwnProperty(key)) {
    //       console.log('ishere' + key)
    //     }
    //   }
    // }
    // // 排序
    // sorting () {
    //   let data = this.bets
    //   data.sort((a, b) => a.bet_asset.symbol.charCodeAt(0) - b.bet_asset.symbol.charCodeAt(0))
    //   this.bets1.sort((a, b) => a.bet_asset.symbol.charCodeAt(0) - b.bet_asset.symbol.charCodeAt(0))
    //   this.bets2.sort((a, b) => a.bet_asset.symbol.charCodeAt(0) - b.bet_asset.symbol.charCodeAt(0))
    //   console.log('sort:' + data)
    // }
  },
  async mounted () {
    this.setActiveTab(1)
    await this.getBets()
  },
  async activated () {
    // 设置定时器，每隔2秒获取数据
    let timer = await setInterval(() => {
      this.getBets()
    }, 2000)
    // 在离开页面时清楚定时器
    this.$once('hook:deactivated', () => {
      clearInterval(timer)
    })
  },
  methods: {
    ...mapMutations({
      setActiveTab: 'tabbar/setActiveTab'
    }),
    async getBets () {
      const { data } = await this.$api.bet.betList()
      console.log(data)
      if (data.code === 200) {
        const bets5min = data.data.filter(item => [1].includes(item.period_type))
        const bets1hour = data.data.filter(item => [2].includes(item.period_type))
        const bets3hour = data.data.filter(item => [3].includes(item.period_type))
        this.betsList = [bets5min, bets1hour, bets3hour]
        console.log(this.betsList)
      } else {
        Toast('获取数据失败，请刷新')
      }
      console.log('我的数据:' + this.bets)
    },
    bet (id) {
      // console.log('idis:' + this.bets[0].id)
      this.$router.push({ name: 'bet', params: { 'betId': id } })
      console.log(id)
    }
  }
}
</script>

<style scoped lang="less">
  *{
    font-size: 14px;
  }
  .tabBets{
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eae3e3;
    .van-col{
      text-align: center;
    }
  }
  .li-container{
    /*padding: 0 10px;*/
    display: flex;
    justify-content: space-around;
    width: 100%;
    border-bottom: solid #ACC0D8 1px;
    .li-left{
      padding: 20px 0;
      /*margin-right: 5px;*/
      .label{
        font-size: 12px;
        padding: 1px;
        margin-right: 2px;
        background-color: hsl(47, 100%, 50%);
      }
      strong{
        font-size: 20px;
        margin-right: 3px;
      }
      .arrow{

      }
      .dew{
        font-size: 12px;
        color: #ffa700;
        background-color: #80808014;
        padding: 1px 2px;
      }
      .date{
        padding-top: 8px ;
        color: darkgrey;
        font-size: 12px;
      }
    }
    .li-center{
      padding: 20px 0;
      .center-up{
        .label2{
          font-size: 12px;
          color: white;
          padding: 2px 3px;
          background-color: mediumseagreen;
          border-radius: 30px;
          margin: 0 5px 10px 5px;
        }
      }
      .center-down{
        margin: 10px 0;
        .label2{
          font-size: 12px;
          color: white;
          padding: 2px 3px;
          background-color: red;
          border-radius: 30px;
          margin: 0 5px 10px 5px;
        }
      }
    }
    .li-right{
      padding: 15px 0 20px 0;
      display: flex;
      .guessup{
        margin: 0 5px;
        color: white;
        padding: 10px 20px;
        background-color: mediumseagreen;
        border-radius: 5px;
        text-align: center;
        .num{
          margin-top: 5px;
          color: darkgreen;
        }
      }
      .guessdown{
        /*margin: 0 5px;*/
        color: white;
        padding: 10px 20px;
        background-color: red;
        border-radius: 5px;
        text-align: center;
        .num{
          margin-top: 5px;
          color: darkgreen;
        }
      }
    }
  }
</style>
